<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 48 48"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><rect data-follow-fill="#F07300" width="48" height="48" rx="24" :fill="_fill"/><path d="m30.59 17.183 3.489-2.95c.186-.155.416-.233.646-.233.543 0 .975.425.975.938a.92.92 0 0 1-.33.702L13.92 33.766a.99.99 0 0 1-.645.234c-.54 0-.975-.417-.975-.938 0-.258.112-.517.329-.702l3.17-2.679c-1.839-1.415-3.416-3.19-4.612-5.035a1.213 1.213 0 0 1 .002-1.292c2.744-4.238 7.507-8.104 12.808-8.104 2.36 0 4.597.741 6.593 1.933Zm3.013 2.287a20.108 20.108 0 0 1 3.218 3.896 1.212 1.212 0 0 1 0 1.268c-2.689 4.253-7.438 8.116-12.824 8.116-1.687 0-3.319-.391-4.849-1.061l3.412-2.884c.457.128.94.195 1.44.195 2.87 0 5.2-2.24 5.2-5 0-.258-.02-.51-.06-.758l4.463-3.772Zm-6.412.584A5.31 5.31 0 0 0 24 19c-2.87 0-5.2 2.24-5.2 5 0 .926.263 1.794.719 2.538l1.508-1.274A3.013 3.013 0 0 1 20.75 24c0-1.725 1.456-3.125 3.25-3.125.616 0 1.193.165 1.685.453l1.507-1.274Z" fill="#fff"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class IconmonstrEyeOffFilled1A43pejgo extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
